<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">设置</view>
            <view class="right"></view>
        </view>
        
        <!-- 设置列表 -->
        <view class="setting-section">
            <view class="section-title">账号设置</view>
            <view class="setting-list">
                <view class="setting-item" @click="goAccountInfo">
                    <view class="label">个人信息</view>
                    <view class="value">
                        <text>{{userInfo.name}}</text>
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="setting-item" @click="goAccountSecurity">
                    <view class="label">账号安全</view>
                    <view class="value">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="setting-item" @click="goBindAccount">
                    <view class="label">绑定社交账号</view>
                    <view class="value">
                        <text>已绑定微信</text>
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="setting-section">
            <view class="section-title">隐私设置</view>
            <view class="setting-list">
                <view class="setting-item">
                    <view class="label">允许陌生人查看问答</view>
                    <view class="value">
                        <u-switch 
                            v-model="privacy.allowStrangerView" 
                            size="24"
                            active-color="#1890FF"
                            @change="updatePrivacySetting('allowStrangerView')"
                        ></u-switch>
                    </view>
                </view>
                <view class="setting-item">
                    <view class="label">默认匿名提问</view>
                    <view class="value">
                        <u-switch 
                            v-model="privacy.anonymousAsk" 
                            size="24"
                            active-color="#1890FF"
                            @change="updatePrivacySetting('anonymousAsk')"
                        ></u-switch>
                    </view>
                </view>
                <view class="setting-item">
                    <view class="label">公开健康数据</view>
                    <view class="value">
                        <u-switch 
                            v-model="privacy.publicHealthData" 
                            size="24"
                            active-color="#1890FF"
                            @change="updatePrivacySetting('publicHealthData')"
                        ></u-switch>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="setting-section">
            <view class="section-title">通知设置</view>
            <view class="setting-list">
                <view class="setting-item">
                    <view class="label">问答回复通知</view>
                    <view class="value">
                        <u-switch 
                            v-model="notification.qaReply" 
                            size="24"
                            active-color="#1890FF"
                            @change="updateNotificationSetting('qaReply')"
                        ></u-switch>
                    </view>
                </view>
                <view class="setting-item">
                    <view class="label">健康提醒通知</view>
                    <view class="value">
                        <u-switch 
                            v-model="notification.healthReminder" 
                            size="24"
                            active-color="#1890FF"
                            @change="updateNotificationSetting('healthReminder')"
                        ></u-switch>
                    </view>
                </view>
                <view class="setting-item">
                    <view class="label">健康资讯推送</view>
                    <view class="value">
                        <u-switch 
                            v-model="notification.healthNews" 
                            size="24"
                            active-color="#1890FF"
                            @change="updateNotificationSetting('healthNews')"
                        ></u-switch>
                    </view>
                </view>
            </view>
        </view>
        
        <view class="setting-section">
            <view class="section-title">其他设置</view>
            <view class="setting-list">
                <view class="setting-item" @click="clearCache">
                    <view class="label">清除缓存</view>
                    <view class="value">
                        <text>{{cacheSize}}</text>
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="setting-item" @click="goAbout">
                    <view class="label">关于我们</view>
                    <view class="value">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
                <view class="setting-item" @click="goFeedback">
                    <view class="label">意见反馈</view>
                    <view class="value">
                        <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 版本信息 -->
        <view class="version-info">
            <text>当前版本 v1.0.0</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                name: '张三'
            },
            privacy: {
                allowStrangerView: true,
                anonymousAsk: false,
                publicHealthData: false
            },
            notification: {
                qaReply: true,
                healthReminder: true,
                healthNews: true
            },
            cacheSize: '23.5MB'
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        goAccountInfo() {
            uni.navigateTo({
                url: '/pages/my/info'
            })
        },
        goAccountSecurity() {
            uni.navigateTo({
                url: '/pages/health/account-security'
            })
        },
        goBindAccount() {
            uni.navigateTo({
                url: '/pages/health/bind-account'
            })
        },
        updatePrivacySetting(key) {
            // 模拟更新隐私设置
            uni.showLoading({
                title: '更新中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '设置已更新',
                    icon: 'success'
                })
            }, 500)
        },
        updateNotificationSetting(key) {
            // 模拟更新通知设置
            uni.showLoading({
                title: '更新中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '设置已更新',
                    icon: 'success'
                })
            }, 500)
        },
        clearCache() {
            uni.showModal({
                title: '提示',
                content: '确定要清除缓存吗？',
                success: (res) => {
                    if (res.confirm) {
                        uni.showLoading({
                            title: '清除中...'
                        })
                        
                        setTimeout(() => {
                            this.cacheSize = '0KB'
                            uni.hideLoading()
                            uni.showToast({
                                title: '清除成功',
                                icon: 'success'
                            })
                        }, 1000)
                    }
                }
            })
        },
        goAbout() {
            uni.navigateTo({
                url: '/pages/health/about'
            })
        },
        goFeedback() {
            uni.navigateTo({
                url: '/pages/health/feedback'
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .setting-section {
        margin-top: 20rpx;
        background-color: #fff;
        
        .section-title {
            font-size: 28rpx;
            color: #999;
            padding: 20rpx 30rpx;
        }
        
        .setting-list {
            .setting-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .label {
                    font-size: 28rpx;
                    color: #333;
                }
                
                .value {
                    display: flex;
                    align-items: center;
                    
                    text {
                        font-size: 28rpx;
                        color: #999;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
    
    .version-info {
        text-align: center;
        padding: 40rpx 0;
        
        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style> 